<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>分类</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
        .selectActive {
            background-color: #FADDCF !important;
            color: #EB7B3D;

        }
        .active a{
          color: #9d0152;
        }
    </style>
</head>
<body>

  <div class="header" id="blank">
      <div v-back.tapmode class="back" tapmode></div>
      <div class="result-header-div">
          <div class="result-header-white">
              <img src="../../image/big/search_btn_grey.png" class="search-img"/>
              <form onsubmit="return searchKeyword()">
                  <input placeholder="" style="outline: none" id="keyword" type="search"/>
              </form>
              <img id="img" src="../../image/small/search_quxiao.png" class="cancel" onclick="closeWin()" tapmode/>
          </div>
          <div class="header-right">
              <span  onclick="searchKeyword()" style="font-size:14px;color:#333">搜索</span>
          </div>
      </div>
  </div>
<div id="app">
    <div class="condition " style="background: white" v-cloak>
        <ul>
            <li v-myclick="[0, changeStatus]" :class="{'active': 0===isActive}">
                <a class="li-click">综合排序</a>
            </li>
            <li v-myclick="[1, changeStatus]" :class="{'active': 1===isActive}">
                <a class="li-click ">销量</a>
            </li>
            <li v-myclick="[2, changeStatus]" :class="{'active': 2===isActive}">
                <a class="li-click " tapmode>价格</a>
                <img style="width: 14px;height: 14px;" v-show="isActive!=2" v-src="'../../image/tab_default_img.png'"/>
                <img style="width: 14px;height: 14px;" v-show="isPrice&&isActive===2"
                     v-src="'../../image/tab_to_des.png'"/>
                <img style="width: 14px;height: 14px;" v-show="!isPrice&&isActive===2"
                     v-src="'../../image/tab_to_asc.png'"/>
            </li>
            <li v-myclick="[3, changeStatus]" :class="{'active': 3===isActive}">
                <a class="li-click">收入比率</a>
            </li>
        </ul>
    </div>
    <div class="modal-search-filter" v-show="showModal" v-myclick="cancelModal" @touchmove.prevent v-cloak>

    </div>
    <div class="home-recommendGoods-box" v-cloak style="padding-top: 112px;">
      <div class="goods_info" v-for="(good, index) in goodsList" v-if="goodsList.length > 0">
        <div class="goods-detail" v-myclick="[good, opebrowser]" >
          <div class="goods-pic">
            <img v-image-resize="{src:'http:'+good.pictUrl}" :key="key" tapmode>
          </div>
          <div class="goods-detail-right">
            <div class="goods-detail-title" :key="key">{{(good.title).replace(/<[^>]+>/g,"")}}</div>
            <div class="sell-price" >
              <div style="float:left;"><span style="color:#666666;" :key="key">原价：</span><span style="color:#9d0152">￥{{good.reservePrice}}</span></div>
              <div style="float:left;padding-left:10px"><span style="color:#666666;" :key="key">优惠价格：</span><span style="color:#9d0152">￥{{good.couponAmount}}</span></div>
              <div style="clear:both"></div>
            </div>
            <div class="goods_number">
              <span style="color:#E5001E;font-size:14px" :key="key">赚：{{(good.zkPrice*good.tkRate*gain_rate.t5_gain_rate_max/100).toFixed(2)}}</span>
              <span style="padding-left:20px" :key="key">销量：{{good.biz30day}}</span>
              <!-- <img class="goods-radio"  @click.stop="selectStatus(good)" v-src="'../../image/unselected.png'" v-show="good.select !== 1">
              <img class="goods-confirm" @click.stop="selectStatus(good)" v-src="'../../image/selected.png'" v-show="good.select == 1"> -->
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="my-order-body" style="padding-top: 30px;" v-cloak v-if="goodsList.length==0">
        <div style="text-align:center;padding: 20px;">
            <img v-src="'../../image/not_available.png'" width="70px" height="70px"/>
            <div style="padding-top:10px ">
                <span>没找到您要的商品</span>
            </div>
        </div>
        <div class="search-tuijian" style="background: #f7f7f7">
            <img class="search-tuijian-bg" v-src="'../../image/home_icon_tuijianleft.png'">
            <span>猜你喜欢</span>
            <img class="search-tuijian-bg" v-src="'../../image/home_icon_tuijianleft.png'">
        </div>
        <div class="home-recommendGoods-box">
            <div class="home-recommendGoods-single1" v-for="(good,index) in likeList" v-show="listOf2col">
                <div class="home-recommendGoods-mallType" :style="{backgroundColor:good.from_type_color}">
                    {{good.from_type_name}}
                </div>
                <img v-image-resize="{src:'http:'+good.pictUrl}" v-myclick="[good.goods_id, openGoodsDetail]" tapmode
                     :key="good.goods_id">
                <div class="home-recommendGoods-info">
                    <div class="info-1">{{(good.title).replace(/<[^>]+>/g,"")}}</div>
                    <div class="info-2">
                        <span class="span-1st">成交{{good.sale_count}}笔</span>
                        <span class="span-2nd" v-if="good.is_free_express == '1'">包邮</span>
                    </div>
                    <div class="info-3">
                        <span class="span-1st">券后价 ¥<span>{{good.price}}</span></span>
                        <span class="span-2nd">¥{{good.prime}}</span>
                    </div>
                </div>
                <div class="home-recommendGoods-buttons">
                    <span v-myclick="[good, changeFavor]" :class="[BSImg, good.favor == '1' ? 'active' : '']"
                          :key="key"></span>
                    <img v-src="'../../image/home_icon_share.png'" v-myclick="[good.share, share]">
                    <a v-myclick="[good.goods_id, openGoodsDetail]">立即购买</a>
                </div>
            </div>
            <div class="home-recommendGoods-single2" v-for="(good,index) in likeList" v-show="!listOf2col">
                <div class="home-recommendGoods-mallType" :style="{backgroundColor:good.from_type_color}">
                    {{good.from_type_name}}
                </div>
                <div class="single2-left">
                    {{good.category_id}}
                    <img v-image-resize="{src:'http:'+good.pictUrl}" v-myclick="[good.goods_id, openGoodsDetail]"
                         :key="good.goods_id">
                </div>
                <div class="single2-right">
                    <div class="home-recommendGoods-info">
                        <div class="info-1">{{(good.title).replace(/<[^>]+>/g,"")}}</div>
                        <div class="info-2">
                            <span class="span-1st">成交{{good.sale_count}}笔</span>
                            <span class="span-2nd" v-if="good.is_free_express == '1'">包邮</span>
                        </div>
                        <div class="info-3">
                            <span class="span-1st">券后价 ¥<span>{{good.price}}</span></span>
                            <span class="span-2nd">¥{{good.prime}}</span>
                        </div>
                    </div>
                    <div class="home-recommendGoods-buttons">
                        <span v-myclick="[good, changeFavor]" :class="[BSImg, good.favor == '1' ? 'active' : '']"
                              :key="key"></span>
                        <img v-src="'../../image/home_icon_share.png'" v-myclick="[good.share, share]">
                        <a v-myclick="[good.goods_id, openGoodsDetail]">立即购买</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-if="goodsList.length != 0">
      <alilazy-load  v-if="goodsList.length > 0" style="background-color:#f7f7f7;margin:10px 0;"
                 count-per-page="20"
                 :arr="goodsList"
                 :url="url"
                 >
      </alilazy-load>
    </div>
</div>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/components.js"></script>
<script>

    var goodsList, likeList;
    var vm;
    var param;
    var cate_name;
    var MNActionButton;
    var wx;
    var goodsselected=[];
    var category_id;
    index=0,
    apiready = function () {
        showProgress();
        setBSImg();
        new Vue({
            el: '#blank'
        });
        MNActionButton = api.require('PIActionButton');
        wx = api.require('wx');
        param = api.pageParam;

        var data = {
            member_id: getPrefs('member_id'),
            category_id: param.category_id,
        };
        cate_name = api.pageParam.cate_name;
        // document.getElementById("cate_name").innerText = cate_name;
        param = api.pageParam;
        if(cate_name){
          document.getElementById('keyword').value = cate_name;
        }else{
          document.getElementById('keyword').value = param.keyword;
        }
        category_id = param.category_id;
        var data = {
            member_id: getPrefs('member_id')
        };
        var callback = function (ret) {
            gain_rate = ret.content;
            max_count_add_per_day = gain_rate.max_count_add_per_day;
            max_count_in_shop = gain_rate.max_count_in_shop;
            left_count_add_per_day = gain_rate.left_count_add_per_day;
            left_count_in_shop = gain_rate.left_count_in_shop;
            keyword = param.keyword;
            pinet.get('http://101.37.174.165:8082/api/SearchAlimamaProduct?keywords='+keyword, function (data) {
                var alurl = data.data.url;
                url = decodeURI(alurl);
                pinet.get(url+"&perPageSize=20", function (result) {
                    aligoods = result.data.pageList;
                    goodsList = aligoods;
                    initApp();
                });
            });
            addListeners();
            api.parseTapmode();
        };
        pinet.post(URL.getMemberRate, data, callback);
    };

    function searchKeyword() {
        var keyword = document.getElementById("keyword").value;
      pinet.get('http://101.37.174.165:8082/api/SearchAlimamaProduct?keywords='+keyword, function (data) {
          var alurl = data.data.url;
          url = decodeURI(alurl);
          pinet.get(url+"&perPageSize=20", function (result) {
              aligoods = result.data.pageList;
                vm.key++;
              vm.goodsList = aligoods;
          });
      });
    }

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                cate_name: cate_name,
                listOf2col: true,
                isActive: 0,
                page: 1,
                index:index,
                url:url,
                sourceurl:url,
                isPrice: true,
                isSale: true,
                goodsList: goodsList,
                likeList: likeList,
                from_type: 0,
                is_free_express: 0,
                showModal: false,
                params: {
                    priceOrder: '',
                    saleCountOrder: '',
                    category_id: category_id,
                    from_type: "",
                    minPrice: "",
                    maxPrice: "",
                    is_free_express: "",
                    minDiscountPrice:'',
                },
                key: 0,
                BSImg: Vue.BSImg
            },
            computed: {
                selectModal: function () {
                    return {
                        show: this.showModal,
                        hide: !this.showModal
                    }
                }
            },
            watch:{
                params:{
                    handler:function (n) {
                        showProgress();
                        var data = {
                            member_id: getPrefs('member_id'),
                            page:1,
                        };
                        concatJson(data, n);
                        var callback = function (ret) {
                            vm.goodsList = ret.content.searchResult;
                            if (vm.goodsList.length == 0) {
                                vm.likeList = ret.content.recommendGoods;
                            }
                            vm.page = 1;
                            vm.key++;
                            window.scrollTo(0, 0);
                        };
                        pinet.post(this.url, data, callback);
                    },
                    deep:true,
                }
            },
            methods: {
                share: function (good) {
                  if (!getPrefs('token')) {
                      reLogin();
                      return;
                  }else{
                      onEvent('商品分享点击');
                      openMNActionButton(good);
                  }
                },
                opebrowser:function(good){
                  api.sendEvent({
                      name: 'opengoodsinfo',
                      extra: {
                          good: good
                      }
                  });
                  openWin('../shop/shopbrowser',{auctionurl:good.auctionUrl,good:good})
                },
                selectStatus: function (good) {
                  if(good.select == 1){
                    good.select = -1;
                    index = (index-1);
                    vm.index = index;
                    goodsselected.remove(good);
                  }else{
                    index = (index+1);
                    if(index>left_count_add_per_day){
                      pinet.alert("亲，每日最多只能收藏"+max_count_add_per_day+"个商品");
                      return;
                    }
                    if(index>left_count_in_shop){
                      pinet.alert("亲，您最多只能收藏"+max_count_in_shop+"个商品");
                      return;
                    }
                    good.select = 1;
                    vm.index = index;
                    goodsselected.push(good);
                  }
                },
                isExpress: function (index) {
                    if (this.is_free_express == index) {
                        this.is_free_express = 0;
                        this.params.is_free_express = '';
                    } else {
                        this.is_free_express = index;
                        if (index == 1) {
                            this.params.is_free_express = 1;
                        }
                        if (index == 2) {
                            this.params.is_free_express = 0;
                        }
                    }
                },
                cancelModal: function () {
                    this.showModal = false;
                    api.setFrameAttr({
                        name: 'select_frame',
                        hidden:true
                    });
                },
                changeFavor: function (good) {
                    changeFavor(good);
                },
                changeStatus: function (index) {
                    if (this.showModal) {
                        this.showModal = false;
                        api.setFrameAttr({
                            name: 'select_frame',
                            hidden:true
                        });
                    }
                    showProgress();
                    var that = this;
                    this.isActive = index;
                    if(index==0){
                      this.url = this.sourceurl;
                    }
                    if(index==1){
                      this.url = this.sourceurl+'&sortType=9&queryType=0';
                    }
                    if(index == 2){
                    this.isPrice = !this.isPrice;
                      if (this.isPrice) {
                          this.url = this.sourceurl+'&sortType=3&queryType=0';
                      } else {
                          this.url = this.sourceurl+'&sortType=4&queryType=0';
                      }
                    }
                    if(index==3){
                      this.url = this.sourceurl+'&sortType=1&queryType=0';
                    }
                    pinet.get(this.url+"&perPageSize=20", function (result) {
                        aligoods = result.data.pageList;
                        vm.key++;
                        that.goodsList = aligoods;
                    });
                },
                openSelect_frame: function () {
                    onEvent('筛选点击');
                    if (this.showModal) {
                        return;
                    }
                    this.showModal = true;
                    this.isActive = 3;
                    api.openFrame({
                        name: 'select_frame',
                        url: 'select_frame.html',
                        rect: {
                            x: 0,
                            y: 102,
                            w: api.winWidth,
                            h: 340
                        },
                        pageParam: {category_id: this.params.category_id},
                        bounces: false,
                    });
                }
            },
        })
    }

    function addListeners() {
        api.addEventListener({
            name: 'select'
        }, function (ret) {
            vm.showModal = false;
            vm.params = ret.value;
            var js = 'ifHidden = false;';
            api.execScript({
                frameName: 'select_frame',
                script: js
            });
        });

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });

    }
</script>
</body>
</html>
